 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		    html()         无参---功能：获取匹配元素中第一元素的内容
			               有参---功能：将匹配元素集合中所有元素替换为新元素
			特点：内容+元素
			.val()         无参---功能：表单内元素：input、select生效
			                           获取表单元素中第一个元素内容
									   
			               有参---功能表单内元素：input、selecct生效
			                          input元素直接显示 value
			                          select元素不是显示 value
									  option 元素中内容：用户显示
									  option 元素中value值，必须当前select中，
									  option元素value值
									  直接赋值：打印select元素对象名称[object Object]
		    特点：针对（表单被form元素可以包裹）元素的内容
			.text()         无参---功能：获取匹配元素集合中所有元素的文本内容
			                有参---功能：【设置】匹配元素集合中所有元素的文本内容替换
		 
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>帅死天边一头牛</span>
		<span>洗发我只用飘柔</span>
		
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本框真实的数据1" />
		<input type="text" value="文本框真实的数据2"placeholder="输入框显示效果[提示]"/> 
		
		<!-- html：下拉列表 select>option*3 需要加value -->
		<!-- jq：点击按钮，设置下拉列表的值 | html()与val()有参是否存在区别  -->
		<button>按钮-针对val()函数-有参</button>
			<select>
				<option value="rem1">lorem1</option>
				<option value="rem2">lorem2</option>
				<option value="rem3">lorem3</option>
			</select>
			<h1>text()函数使用</h1>
			<button class="btn1">按钮-针对text()函数-无参</button>
			<button class="btn2">按钮-针对text()函数-有参</button>
			<p>lorem4</p>
			<p>lorem5</p>
			<p>lorem6</p>
			<script>
				//   1.找到  类名为  btn1  的按钮--点击--弹窗内容为 三个p元素内容 【无参】
				$(".btn1").click(function(){
					var ptext=$("p").text();
					alert(ptext);
				});
				//   2.找到  类名为  btn2  的按钮--点击--lorem4/5/6 改成 “修改文本” 【有参】
				$(".btn2").click(function(){
					$("p").text("修改文本");
				});
				//$("button").click(function(){
					//设置元素第一个的值    1.直接设置下拉列表中value的值
				//	$("select").val("rem1");
					//设置元素第一个的值    2.给第一个值添加设置好的内容【本身存在】
				//	var rem=$("select").val();
					//value的值：真实数据  option中值：显示数据
					//object Ohect  测试：无参
				//	alert("val()函数有参："+rem);
				//});
			//动态效果：点击按钮，获取第一一个表单元素的内容，元素打印出来
			//$("button").click(function(){
				/* 注意：js变量名不可以为关键字 in是关键字 */
			/* 	var in=$("input").val();
				alert("val()函数无参："+ins)
			}); */
			//有参：点击按钮--下面两个span  改成 江归江、山归山
			/* $("button").click(function(){
				$("span").html("<span>江归江、山归山</span>");
			}); */
			//js变量 【var i=1】==JQ变量  var 变量名=值、元素
			//无参数 html() 函数使用
			//var html=$("span").html();
			//BOM方式打印数据
			//alert("无参数获取第一个元素内容："+html);
		</script>
	</body>
</html>